<template>
	<view class="guide-vip-state" v-if="viprate">
		<!-- 返回首页 -->
		<uni-bankhome />
		<div class="button-list">
			<view class="button-item" @click="upgradeVip('1')" v-if="vipCard1">
				<image v-if="vipCard1" class="image" :src="vipCard1" mode="widthFix"></image>
				<image v-else class="image" src="https://rsyl.oss-cn-beijing.aliyuncs.com/280fdab456ff48a48a7f794aff5e5296.png"
					mode="widthFix"></image>
			</view>
			<view class="button-item" @click="upgradeVip('2')" v-if="vipCard2">
				<image v-if="vipCard2" class="image" :src="vipCard2"
					mode="widthFix"></image>
				<image v-else class="image" src="https://rsyl.oss-cn-beijing.aliyuncs.com/0b38a38d476241df91665982bba3ddb7.png"
					mode="widthFix"></image>
			</view>
		</div>
		<div class="tip-wrapper" v-if="cardText">
			<u-parse :lazy-load="true" :use-cache="true" :show-with-animation="true" :html="cardText.content"></u-parse>
		</div>
	</view>
</template>

<script>
	import {
		getUserWallet,
		CreatePartner,
		VIPRateSetting,
		getUserInfo
	} from "@/api/members";
	import {
		getArticleDetailType,
		getPictureList
	} from "@/api/article";

	import storage from "@/utils/storage.js";
	import * as API_Trade from "@/api/trade";
	import config from '@/config/config'
	import BigNumber from 'bignumber.js'
	export default {
		data() {
			return {
				cardText: '',
				// 授权信息展示，商城名称
				projectName: config.name,
				userInfo: {},
				viprate: '',
				vipCard2: '',
				vipCard1: '',
			}
		},
		async onShow() {
			getArticleDetailType('CARD_DESCRIPTION').then((res) => {
				if (res.data.result) {
					this.cardText = res.data.result[0]
				}
			})
			this.userInfo = this.$options.filters.isLogin();
			if (this.$options.filters.isLogin("auth")) {
				let result = await getUserWallet(); //预存款
				this.walletNum = result.data.result.memberWallet;
				VIPRateSetting().then((res) => {
					let result = res.data.result
					let params = {}
					for (let i = 0; i < result.length; i++) {
						params[result[i].level] = {
							rate: result[i].rechargeRule,
							name: result[i].name,
							money: result[i].money,
							rateTen: new BigNumber(result[i].rechargeRule).multipliedBy(10).toNumber(),
							content: result[i].content,
						}
					}
					storage.setVipRate(params);
					this.viprate = params
				})
			} else {
				uni.showToast({
					icon: "none",
					duration: 3000,
					title: "请先登录！",
				});
				this.$options.filters.navigateToLogin("redirectTo");
			}
			this.getPicture()
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage"]
			})
		},
		// 分享到微信好友
		async onShareAppMessage(res) {
			// console.log(res)
			let that = this;
			if (res.from === 'menu') {
				return {
					title: '百焕会员',
					path: '/pages/tabbar/user/vip/vip'
				};
			}
		},
		methods: {
			//获取图片
			getPicture() {
				Promise.all([getPictureList({
					code: 'vip_card2'
				}), getPictureList({
					code: 'vip_card1'
				})]).then(ress => {
					this.vipCard2 = ress[0].data.result[0].content
					this.vipCard1 = ress[1].data.result[0].content
				})
			},
			// 去升级会员
			upgradeVip(grade) {
				if (this.userInfo.gradeName + '' == '2') {
					uni.showToast({
						title: "您已经是" + this.viprate['2'].name + "了",
						icon: "none",
					});
				} else if (this.userInfo.gradeName + '' == '1') {
					if (grade + '' == '1') {
						uni.showToast({
							title: "您已经是" + this.viprate['1'].name + "了",
							icon: "none",
						});
					} else {
						uni.navigateTo({
							url: "/pages/mine/deposit/vip?vip=" + grade
						})
					}
				} else {
					uni.navigateTo({
						url: "/pages/mine/deposit/vip?vip=" + grade
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.guide-vip-state {
		padding-top: 48upx;
		margin: 0 auto;
		width: 90%;
		overflow: hidden;

		.button-list {
			.button-item {
				margin: 32upx;
				border: 0;
				border-radius: 12upx;
				position: relative;

				.image {
					width: 100%;
				}

				.text {
					position: absolute;
					top: 150upx;
					left: 60upx;
					font-size: 32upx;
					font-weight: 700;
				}

				.yin {
					color: rgba(177, 177, 177, 1);
				}

				.jin {
					color: rgba(175, 130, 60, 1);
				}
			}
		}

		.tip-wrapper {
			font-size: 30upx;
			padding: 24upx 24upx 24upx 48upx;

			.title {
				font-weight: bold;
				margin-bottom: 32upx;
				font-size: 48upx;
				color: $main-color;
			}

			.content {
				text-indent: -1em;
				margin-top: 16upx;
			}
		}
	}
</style>
